body, html {
    margin: 0;
    padding: 0;
    user-select: none;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: top;
    background: #00309a;
    background: linear-gradient(to right, rgba(0, 48, 154, 1) 0%, rgba(0, 22, 91, 1) 100%);
    max-width: 50em;
    min-width: 20em;
    border-left: 1px solid black;
    border-right: 1px solid black;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
    line-height: 1.25em;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: white;
}

.header {
    border-top: 1px solid #2f1988;
    border-bottom: 1px solid #2f1988;

    ul {
        display: flex;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    li {
        display: inline-block;
        background: rgba(100, 100, 200, 0.2);
        cursor: pointer;
        padding: 1em;
        margin: 0;
        transition: background 0.20s ease-in-out;

        &:hover {
            background: rgba(100, 100, 200, 0.5);
        }
        &.active {
            opacity: 1 !important;
            background: rgba(100, 100, 255, 0.7);
        }
    }
}


.prehead {
    position: relative;
    padding: 1em;
    color: white;
    font-family: sans-serif;
    display: flex;
    margin-bottom: 0em;
    background: rgb(44, 69, 193);

    .title {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    h1 {
        margin-top: 0;
        margin-bottom: 0;
        line-height: 1.2em;
    }
    
    h2 {
        margin-top: 0;
        margin-bottom: 0;
        opacity: 0.8;
        font-weight: normal;
        font-size: 1em;
    }
    
    img {
        height: 5em;
        margin-right: 1em;
    }
}

.popup {
    padding: 2em;
    overflow-x: hidden;

    .pane {
        display: flex;
        flex-direction: column;
        gap: 1em;
    }

    .fronttab {
        flex-direction: row;

        img {
            width: 3em;
            height: 3em;
            padding: 1em;
            padding-left: 0;        
        }

        .notworking, .keeprunning {
            gap: 0.1em;
        }

        .siteselector {
            display: flex;
            justify-content: left;
            align-items: center;
            gap: 0.5em;
        }
    }
    .unhandledtab_complete {
        align-items: center;
        justify-content: center;  
        text-align: center;      
    }
    .centeredlabel {
        display: flex;
        align-items: center;
        input {
            margin-right: 0.5em;
        }
    }
}

button, input {
    padding: 1em;
    margin: 0.5em 0;
    border: 1px solid black;
    border-radius: 0;
    background: #25348c;
    transition: background 0.125s ease-in-out;
    color: white;
    cursor: pointer;        
    &:hover {
        background: #3244a2;
    }
    &[type="url"]{
        color: black;
        background: rgba(100, 100, 100,0.2);
    }
}


.configurator {
    flex: 1 0 auto;
    background: white;
    color: black;

    #permissions {
        padding: 1em 3em;
        background: #fffeda;
        border-bottom: 2px solid #e8e146;
    }

    h2 {
        display: inline-block;
        font-size: 1.1em;
        font-weight: bold;
        font-family: sans-serif;
        margin-bottom: 0.75em;
        margin-top: 0;
    }

    .permissionslist li {
        margin-top: 1.5em;
    }

    .categorylist, .settingsList, .flags, .rulelist {
        list-style: none;
        margin-left: 0em;
        padding-left: 0em;

        li {
            background: rgba(0, 0, 100, 0.025);
            position: relative;
            padding: 1em;
            padding-left: 6em;
            padding-right: 2em;
            margin-left: 0;
            cursor: pointer;

            &:hover {
                background: rgba(0, 0, 100, 0.075);
            }

            &.active {
                background: rgba(100, 255, 100, 0.2);
                &:hover {
                    background: rgba(50, 255, 50, 0.2);
                }
            }

            &.hideOrPip {
                padding: 2em;

                form {
                    display: flex;
                    align-items: flex-start;
                    flex-wrap: wrap;
                    margin-top: 1em;       
                    
                    &>div {
                        flex: 1 1 auto;
                        width: 50%;
                        min-width: 15em;
                        box-sizing: border-box;                        
                    }

                    input {
                        display: none;

                        &:checked + label {
                            background: rgba(100, 255, 100, 0.2);
                        }
                        &:checked + label img {
                            background: rgba(50, 255, 50, 0.2);
                            box-shadow: 0em 0em 0.2em rgba(0,0,0,0.2);
                        }
                    }

                    label {
                        display: block;
                        text-align: center;
                        padding: 1em;
                        cursor: pointer;
                        background: rgba(0,0,0,0.02); 

                        &:hover {
                            background: rgba(255,255,255,0.2);                            
                        }
                    }

                    img {
                        width: 12em;
                        height: 10em;
                        object-fit: contain;
                        background: #e6e6e6;
                        border: none;
                        box-shadow: 0.2em 0.2em 0.5em rgba(0,0,0,0.1);
                        display: block;
                        margin: 1em auto;                        
                    }
                }
            }
        }
    }

    .slider {
        position: absolute;
        left: 1.75em;
        height: 20px;
        width: 44px;
        pointer-events: none;

        input {
            display: none;
        }
    }    

    .knob {
        cursor: pointer;
        background-color: #ccc;
        border-radius: 1em;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        position: absolute;
        transition: .4s;

        &:before {
            background-color: #fff;
            border-radius: 1em;
            bottom: 2px;
            content: "";
            height: 16px;
            left: 2px;
            position: absolute;
            transition: .25s;
            width: 16px;
        }
    }    

    input:checked+.knob {
        background-color: #66bb6a;
        &:before {
            transform: translateX(24px);
        }
    }

    .rulelist li {
        display: flex;
        align-items: center;
        word-wrap: break-word;
        cursor: initial !important;
    
        button {
            pointer-events: all;
            position: absolute;
            left: 2em;
            border: 0;
            cursor: pointer;
    
            &:hover {
                background: red;
            }
        }
    }
    
    .ruleoptions, .logoptions {
        padding: 2em;
        padding-top: 0;
    }
    
    .helptext {
        padding: 2em;
        padding-bottom: 0;
    }    

    .saves {
        text-align: center;
        padding: 1em;
        font-size: 1.2em;
        font-weight: bold;
    
        #clicks {
            font-size: 2em;
        }
    }
    
    .logList {
        padding: 2em;
        border-spacing: 0;
        margin: auto;
    
        th {
            background: #cedcff;
            font-weight: normal;
            padding: 0.25em 1em;
        }
        tr:first-child th {
            font-weight: bold;
        }
        td {
            text-align: center;
        }
        tr:not(:first-child):nth-child(2n) th {
            background: #eef2ff;
        }
        tr:not(:first-child):nth-child(2n+1) th {
            background: #e6eafd;
        }
    }
}



